<template>
<div id="main">
  <div id="dd">
    
        <hr/>
        <div id="mian2">
          <h1>    <label style="margin-left:35%">按品牌名称搜索&nbsp;</label></h1> 
        <input type="text" style="width:30%;height:30px;margin-left:33%" placeholder="请输入搜索姓名" v-focus v-model='findName'/>
        
            <ul>
            <li v-for="(person,index) in filterName" :key="index">
              {{person.name}}<br/><br/>
                <img :src="person.src" />
                
            </li>
        </ul>
             <ul>
            <li v-for="(person,index) in filterName1" :key="index">
              {{person.name}}<br/>
                <img :src="person.src" />
            </li>
        </ul>



         <ul>
            <li v-for="(person,index) in filterName2" :key="index">
           {{person.name}}<br/>
                <img :src="person.src" />
            </li>
        </ul>


         <ul>
            <li v-for="(person,index) in filterName3" :key="index">
               {{person.name}}<br/> 
                <img :src="person.src" />
            </li>
        </ul>

 <ul>
            <li v-for="(person,index) in filterName4" :key="index">
                {{person.name}}<br/>
                 <img :src="person.src" />
            </li>
           
        </ul>

        <ul>
            <li v-for="(person,index) in filterName5" :key="index">
                {{person.name}}<br/>
                <img :src="person.src" />
            </li>
        </ul>

        </div>
        
    </div>
    </div>
</template>
<script>
export default {

            el:'#dd',
            data(){
                //orgList:搜索后显示的列表，初始值应该从后台拿取
                return{
                   findName:'',
               persons:[
                   {name:'花西子',jg:24,ys:'红',src: require('@/assets/21.jpg'),phnoe:'1331313215615'},
                   {name:'花西子',jg:24,ys:'红',src: require('@/assets/39.jpg'),phnoe:'1331313215615'},
                   {name:'花西子',jg:24,ys:'红',src: require('@/assets/32.jpg'),phnoe:'1331313215615'},
                   {name:'花西子',jg:24,ys:'红',src: require('@/assets/33.jpg'),phnoe:'1331313215615'},
                   {name:'花西子',jg:24,ys:'红',src: require('@/assets/37.jpg'),phnoe:'1331313215615'}
               ],
               persons1:[
                   {name:'迪奥',jg:24,ys:'红',src: require('@/assets/41.jpg'),phnoe:'1331313215615'},
                   {name:'迪奥',jg:24,ys:'红',src: require('@/assets/42.jpg'),phnoe:'1331313215615'},
                   {name:'迪奥',jg:24,ys:'红',src: require('@/assets/43.jpg'),phnoe:'1331313215615'},
                   {name:'迪奥',jg:24,ys:'红',src: require('@/assets/44.jpg'),phnoe:'1331313215615'},
                   {name:'迪奥',jg:24,ys:'红',src:require('@/assets/45.jpg'),phnoe:'1331313215615'}
               ],
                 persons2:[
                    {name:'圣罗兰',jg:2400,ys:'红',src: require('@/assets/60.jpg'),phnoe:'1331313215615'},
                   {name:'圣罗兰',jg:24,ys:'红',src: require('@/assets/64.jpg'),phnoe:'1331313215615'},
                   {name:'圣罗兰',jg:24,ys:'红',src: require('@/assets/62.jpg'),phnoe:'1331313215615'},
                   {name:'圣罗兰',jg:24,ys:'红',src: require('@/assets/63.jpg'),phnoe:'1331313215615'},
                   {name:'圣罗兰',jg:24,ys:'红',src:require('@/assets/64.jpg'),phnoe:'1331313215615'}
               ],
                 persons3:[
                   {name:'香莱尔',jg:24,ys:'红',src: require('@/assets/66.jpg'),phnoe:'1331313215615'},
                   {name:'香莱尔',jg:24,ys:'红',src: require('@/assets/67.jpg'),phnoe:'1331313215615'},
                   {name:'香莱尔',jg:24,ys:'红',src: require('@/assets/68.jpg'),phnoe:'1331313215615'},
                   {name:'香莱尔',jg:24,ys:'红',src: require('@/assets/69.jpg'),phnoe:'1331313215615'},
                   {name:'香莱尔',jg:24,ys:'红',src:require('@/assets/70.jpg'),phnoe:'1331313215615'}
               ],
                 persons4:[
                    {name:'纪梵希',jg:24,ys:'红',src: require('@/assets/71.jpg'),phnoe:'1331313215615'},
                   {name:'纪梵希',jg:24,ys:'红',src: require('@/assets/72.jpg'),phnoe:'1331313215615'},
                   {name:'纪梵希',jg:24,ys:'红',src: require('@/assets/73.jpg'),phnoe:'1331313215615'},
                   {name:'纪梵希',jg:24,ys:'红',src: require('@/assets/74.jpg'),phnoe:'1331313215615'},
                   {name:'纪梵希',jg:24,ys:'红',src:require('@/assets/75.jpg'),phnoe:'1331313215615'}
               ],
              persons5:[
                    {name:'阿玛尼',jg:24,ys:'红',src: require('@/assets/76.jpg'),phnoe:'1331313215615'},
                   {name:'阿玛尼',jg:24,ys:'红',src: require('@/assets/77.jpg'),phnoe:'1331313215615'},
                   {name:'阿玛尼',jg:24,ys:'红',src: require('@/assets/78.jpg'),phnoe:'1331313215615'},
                   {name:'阿玛尼',jg:24,ys:'红',src: require('@/assets/79.jpg'),phnoe:'1331313215615'},
                   {name:'阿玛尼',jg:24,ys:'红',src:require('@/assets/80.jpg'),phnoe:'1331313215615'}
               ],
               orderType:0
                
                }
            },
            computed:{
               filterName(){
                   let {findName,persons,orderType}=this;
                   let arr=[...persons];
                   if(findName.trim()){
                       arr=persons.filter(p=>p.name.indexOf(findName) !=-1)
                   }

                   if(orderType){
                       arr.sort((p1,p2)=>{
                           if(orderType===1){
                               return p2.age-p1.age
                           }
                           else{
                               return p1.age-p2.age
                           }
                       });
                   }
                   return arr;
               },
               filterName1(){
                   let {findName,persons1,orderType}=this;
                   let arr=[...persons1];
                   if(findName.trim()){
                       arr=persons1.filter(p=>p.name.indexOf(findName) !=-1)
                   }

                   if(orderType){
                       arr.sort((p1,p2)=>{
                           if(orderType===1){
                               return p2.age-p1.age
                           }
                           else{
                               return p1.age-p2.age
                           }
                       });
                   }
                   return arr;
               },
                filterName2(){
                   let {findName,persons2,orderType}=this;
                   let arr=[...persons2];
                   if(findName.trim()){
                       arr=persons2.filter(p=>p.name.indexOf(findName) !=-1)
                   }

                   if(orderType){
                       arr.sort((p1,p2)=>{
                           if(orderType===1){
                               return p2.age-p1.age
                           }
                           else{
                               return p1.age-p2.age
                           }
                       });
                   }
                   return arr;
               },
                filterName3(){
                   let {findName,persons3,orderType}=this;
                   let arr=[...persons3];
                   if(findName.trim()){
                       arr=persons3.filter(p=>p.name.indexOf(findName) !=-1)
                   }

                   if(orderType){
                       arr.sort((p1,p2)=>{
                           if(orderType===1){
                               return p2.age-p1.age
                           }
                           else{
                               return p1.age-p2.age
                           }
                       });
                   }
                   return arr;
               },
                filterName4(){
                   let {findName,persons4,orderType}=this;
                   let arr=[...persons4];
                   if(findName.trim()){
                       arr=persons4.filter(p=>p.name.indexOf(findName) !=-1)
                   }

                   if(orderType){
                       arr.sort((p1,p2)=>{
                           if(orderType===1){
                               return p2.age-p1.age
                           }
                           else{
                               return p1.age-p2.age
                           }
                       });
                   }
                   return arr;
               },
                filterName5(){
                   let {findName,persons5,orderType}=this;
                   let arr=[...persons5];
                   if(findName.trim()){
                       arr=persons5.filter(p=>p.name.indexOf(findName) !=-1)
                   }

                   if(orderType){
                       arr.sort((p1,p2)=>{
                           if(orderType===1){
                               return p2.age-p1.age
                           }
                           else{
                               return p1.age-p2.age
                           }
                       });
                   }
                   return arr;
               }
           },
            methods:{
                 orderByAge(orderType){
                   this.orderType=orderType;
               }
                

            }
         
}
</script>
<style scoped>
 #main{
     width: 100%;
     height: 300%;
     background: azure;
 }
  #mian2{
     width: 1200px;
     height: 100%;
     margin: auto;
     background: azure;
 }
 ul{
     list-style: none;
 }
 ul li {
     display:block;
     float: left;
     margin-left: 10px;
     text-align: center;
     /* font-size: 30px; */

     font-family:Arial,Helvetica,sans-serif;
       font-size:2em;
       font-weight:normal;
    color: cadetblue;
   
 }
  img:hover{

                 box-shadow: 10px 10px 10px rgba(26, 139, 83, 0.5);
                 transform: scale(0.75) rotate(45deg);
                 /*考虑浏览器兼容性*/

                 -moz-box-shadow: 10px 10px 10px  rgba(26, 139, 83, 0.5);

                 -webkit-box-shadow: 10px 10px 10px  rgba(26, 139, 83, 0.5);

            }
</style>